import React from "react";
import {
    // @ts-ignore
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle
} from "@/components/ui/dialog";
import {Button} from "@/components/ui/button";

type Props = {
    visible: boolean;
    title?: string;
    content?: string;
    confirmText?: string;
    cancelText?: string;
    className?: string;
    children?: React.ReactNode;
    footer?: React.ReactNode;
    footerVisible?: boolean;
    onCancel: () => void;
    onClose: () => void;
    onConfirm: () => void;
}
const DialogCom: React.FC<Props> = ({footerVisible = true, ...props}) => {
    return (
        <Dialog open={props.visible} onOpenChange={props.onClose}>
            <DialogContent className={props.className}>
                <DialogHeader>
                    <DialogTitle className="flex justify-center">{props.title ?? '温馨提示💗'}</DialogTitle>
                    <DialogDescription>
                        {props.children ? props.children : props.content}
                    </DialogDescription>
                </DialogHeader>
                {footerVisible && <DialogFooter className="flex justify-center!">
                     {props.footer ?? <React.Fragment>
                         <Button className="mr-[20px]" variant="outline" onClick={props.onCancel}>{props.cancelText ?? '取消'}</Button>
                         <Button onClick={props.onConfirm}>{props.confirmText ?? '确认'}</Button>
                     </React.Fragment>}
                 </DialogFooter>}
            </DialogContent>
        </Dialog>
    );
}

export default DialogCom;
